/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var categoryContainer = null;
var subCategoryContainer = null;
var addContainer = null;

var userContainer = null;
var descContainer = null;
var categoryLeftContainer = null;
var categoryRightContainer = null;

var temp_name = null;
var moderators = null;

function init_category(){
    userContainer = document.getElementById("user-column");
    descContainer = document.getElementById("desc-user-column");
    categoryLeftContainer = document.getElementById("left-column");
    categoryRightContainer = document.getElementById("right-column");
    addContainer = document.getElementById("add-category");
    categoryContainer = document.getElementById("category-container");
    CategoryPanel.init();
}

function show_category_prompt()
{
    var category = prompt("Insert category name :");
    var username = prompt("Insert owner of this category :");
    var ajax = new Ajax();
    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText ;
        alert(success);
        init_category();
    }

    // Send request
    ajax.openAndSend("POST", baseURL + "/InsertCategory", true, "category=" + category + "&owner=" + username);
}

function addCategory() {
    addContainer.innerHTML = "";
    var inner = '<input id="newCategory" type="text" value="new category" name="newCategory" onclick="{this.value=null;}" />';
    inner = inner + '<input id="newOwner" type="text" value="owner" name="newOwner" onclick="{this.value=null;}" onkeypress="{if (event.keyCode==13) parseInputCategory();}"/>';
    addContainer.innerHTML = inner;
}

function parseInputCategory() {
    var newCategory = document.getElementById("newCategory").value;
    var newOwner = document.getElementById("newOwner").value;

    addCategoryProcess(newCategory, newOwner);
}

function addCategoryProcess(newCategory, newOwner) {
    var ajax = new Ajax();
    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText ;
        alert(success);
        init_category();
    }

    // Send request
    ajax.openAndSend("POST", baseURL + "/InsertCategory", true, "category=" + newCategory + "&owner=" + newOwner);
}

function show_subcategory_prompt(category_name, category_id, action, ownerName)
{
    var subcategory = prompt("Insert subcategory name :");
    var username = prompt("Insert owner of this subcategory :");
    var ajax = new Ajax();
    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText ;
        alert(success);
        SubCategoryPanel.getDataAndRender(category_name, category_id, action, ownerName);
    }

    // Send request
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=insert&subcategory=" + subcategory + "&owner=" + username + "&id=" + category_id);
}

function addSubCategory(category_name, parent_id, action, ownerName) {
    addSubContainer = document.getElementById("add-subcategory");
    addSubContainer.innerHTML = "";
    var inner = '<input id="newCategory" type="text" value="new sub category" name="newCategory" onclick="{this.value=null;}" />';
    inner = inner + '<input id="newOwner" type="text" value="owner" name="newOwner" onclick="{this.value=null;}" onkeypress="{if (event.keyCode==13) parseInputSubCategory(\''+category_name +'\',' + parent_id + ',' + action + ',\'' + ownerName+'\');}"/>';
    addSubContainer.innerHTML = inner;
}

function parseInputSubCategory(category_name, parent_id, action, ownerName) {
    var newCategory = document.getElementById("newCategory").value;
    var newOwner = document.getElementById("newOwner").value;

    addSubCategoryProcess(newCategory, newOwner, category_name, parent_id, action, ownerName);
}

function addSubCategoryProcess(newCategory, newOwner, category_name, parent_id, action, ownerName) {
    var ajax = new Ajax();
    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText ;
        alert(success);
        SubCategoryPanel.getDataAndRender(category_name, parent_id, action, ownerName);
    }

    // Send request
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=insert&subcategory=" + newCategory + "&owner=" + newOwner + "&id=" + parent_id);
}

function deleteCategory(name, id, action, ownerName){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function(){
        CategoryPanel.getDataAndRender();
        SubCategoryPanel.getDataAndRender(name, id, action, ownerName)
    }

    //Send
    ajax.openAndSend("POST", baseURL + "/CategoryPanel", true, "action=delete&name=" + name )
}

function showSubCategory(name, id, action, ownerName){
   SubCategoryPanel.getDataAndRender(name, id, action, ownerName);
}

function editCategoryName(name, id, action, ownerName){
    var categoryContainer = getElementByClass("category-name", document.getElementById("title-"+id))[0];
    var editCategoryContainer = getElementByClass("edit-category", document.getElementById("title-"+id))[0];

    categoryContainer.innerHTML = "";
    editCategoryContainer.innerHTML = "";

    temp_name = name;
    var inner = '<input type="text" value="'+name+'" name="input_category_name" onkeypress="{if (event.keyCode==13) editCategoryNameProcess(this.value,'+id+','+action+',\''+ownerName+'\');}"/>';
    categoryContainer.innerHTML = inner;
}

function editCategoryNameProcess(name, id, action, ownerName){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText;
        if(success == 1){
            SubCategoryPanel.getDataAndRender(name, id, action, ownerName);
            CategoryPanel.getDataAndRender();
        }else{
            SubCategoryPanel.getDataAndRender(temp_name, id, action, ownerName);
        }
    }
    // Send
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=setcategoryname&name=" + name+"&id="+ id + "&owner-name=" + ownerName);
}

function editSubCategoryOwner(name, id, action, ownerName, subCategoryName, subCategoryId){
    var subCategoryOwnerContainer = getElementByClass("subcategory-owner", document.getElementById("subcategory-"+subCategoryId))[0];
    var editSubCategoryOwnerContainer = getElementByClass("editsubcategory-owner", document.getElementById("subcategory-"+subCategoryId))[0];

    subCategoryOwnerContainer.innerHTML = "";
    editSubCategoryOwnerContainer.innerHTML = "";

    var inner = '<select name="sub-moderator"  onchange="editSubCategoryOwnerProcess(\''+name+'\','+id+',0,\''+ownerName+'\',\''+subCategoryName+'\','+subCategoryId+',this.value);">';
    inner = inner + '<option value=\'none\'></option> \n';
    for(var i = 0; i < moderators.length; i++){
        var moderator = moderators[i];
        inner = inner + '<option value='+moderator.id+'>'+moderator.userName+'</option> \n';
    }
    inner = inner + '</select>';
    subCategoryOwnerContainer.innerHTML = inner;
}

function editSubCategoryOwnerProcess(name, id, action, ownerName, subCategoryName,subCategoryId , value){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        SubCategoryPanel.getDataAndRender(name, id, action, ownerName);
    }
    // Send
     ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=setownername&name=" + subCategoryName+"&id="+ value);
}

function editCategoryOwner(name, id, action, ownerName){
 
    var categoryOwnerContainer = getElementByClass("category-owner", document.getElementById("title-"+id))[0];
    var editCategoryOwnerContainer = getElementByClass("editcategory-owner", document.getElementById("title-"+id))[0];

    categoryOwnerContainer.innerHTML = "";
    editCategoryOwnerContainer.innerHTML = "";

    var inner = '<select name="moderator"  onchange="editCategoryOwnerProcess(\''+name+'\','+id+',0,\''+ownerName+'\',this.value);">';
    inner = inner + '<option value=\'none\'></option> \n';
    for(var i = 0; i < moderators.length; i++){
        var moderator = moderators[i];
        inner = inner + '<option value='+moderator.id+'>'+moderator.userName+'</option> \n';
    }
    inner = inner + '</select>';
    categoryOwnerContainer.innerHTML = inner;
}

function editCategoryOwnerProcess(name, id, action, ownerName, value){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        var data = eval("(" + ajax.xhr.responseText + ")");
        var newOwnerName = data.subcategorys[0].ownerName;
        SubCategoryPanel.getDataAndRender(name, id, action, newOwnerName);
    }
    // Send
     ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=setownername&name="+name+"&id="+ value);
}

function editSubCategoryName(categoryName, id, action, ownerName, subCategoryName, subCategoryId){
    var subCategoryContainer = getElementByClass("subcategory-name", document.getElementById("subcategory-"+subCategoryId))[0];
    var editSubCategoryContainer = getElementByClass("edit-subcategory", document.getElementById("subcategory-"+subCategoryId))[0];

    subCategoryContainer.innerHTML = "";
    editSubCategoryContainer.innerHTML = "";
    temp_name = subCategoryName;
    var inner = '<input type="text" value="'+subCategoryName+'" name="input_subcategory_name" onkeypress="{if (event.keyCode==13) editSubCategoryNameProcess(\''+categoryName+'\','+id+','+action+',\''+ownerName+'\',this.value,'+subCategoryId+');}"/>';
    subCategoryContainer.innerHTML = inner;
}

function editSubCategoryNameProcess(categoryName, id, action, ownerName, subCategoryName, subCategoryId){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        var success = ajax.xhr.responseText;
        SubCategoryPanel.getDataAndRender(categoryName, id, action, ownerName);
    }
    // Send
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=setsubcategoryname&name=" + subCategoryName+"&id="+ subCategoryId );
}

function deleteSubCategory(categoryName, id, action, ownerName, subCategoryName){
    var ajax = new Ajax();

    ajax.onLoadSuccess = function(){
        CategoryPanel.getDataAndRender();
        SubCategoryPanel.getDataAndRender(categoryName, id, action, ownerName)
    }

    //Send
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=delete&name=" + subCategoryName )
}

function SubCategoryPanel(){

}
SubCategoryPanel.data = null;

SubCategoryPanel.getDataAndRender = function(name, id, action, ownerName) {
    
    var ajax = new Ajax();

    ajax.onLoadSuccess = function(){
        SubCategoryPanel.data = eval("(" + ajax.xhr.responseText + ")");
        SubCategoryPanel.render(name, id, action, ownerName);
    }
    ajax.openAndSend("POST", baseURL + "/SubCategoryPanel", true, "action=get&name=" + name + "&id=" + id);
}

SubCategoryPanel.render = function(name, id, action, ownerName){
    var data = SubCategoryPanel.data.subcategorys;
    moderators = SubCategoryPanel.data.moderators;
    subcategoryContainer = document.getElementById("subcategory-container");
    subcategoryContainer.innerHTML = "";
 
    if(action == 0){
        var categoryElmt = document.createElement("div");
        var innerCategory = '<div class = "category-name">' + name + '</div>\n' ;
        innerCategory = innerCategory +  '<div class="edit-category">' + '<img src="edit" alt="edit" onclick="editCategoryName(\''+name+'\','+id+',0,\''+ownerName+'\');"  />' + '</div>\n' ;
        innerCategory = innerCategory +  '<div class = "category-owner">' + ownerName + '</div>\n';
        innerCategory = innerCategory +  '<div class = "editcategory-owner">' + '<img src="edit" alt="edit" onclick="editCategoryOwner(\''+name+'\','+id+',0,\''+ownerName+'\');"  />' + '</div>\n' ;
        innerCategory = innerCategory + '<br/>'
        categoryElmt.className = "title";
        categoryElmt.id = "title-" + id;
        categoryElmt.innerHTML = innerCategory;
        subcategoryContainer.appendChild(categoryElmt);
    }
   
    for(var i = 0; i < data.length; i++){
        var subcategory = data[i];
        var subcategoryElmt = document.createElement("div");
        var inner = '<div class = "subcategory-name">'+ subcategory.name + '</div>\n' ;
        inner = inner +  '<div class="delete-subcategory">' + '<img src="delete" alt="delete" onclick="deleteSubCategory(\''+name+'\','+id+',0,\''+ownerName+'\',\''+subcategory.name+'\');" />' + '</div>\n' ;
        inner = inner + '<div class="edit-subcategory">' + '<img src="edit" alt="edit" onclick="editSubCategoryName(\''+name+'\','+id+',0,\''+ownerName+'\',\''+subcategory.name+'\','+subcategory.id+');" />' + '</div>\n';
        inner = inner +  '<div class = "subcategory-owner">' + subcategory.ownerName + '</div>\n';
        inner = inner +  '<div class = "editsubcategory-owner">' + '<img src="edit" alt="edit" onclick="editSubCategoryOwner(\''+name+'\','+id+',0,\''+ownerName+'\',\''+subcategory.name+'\','+subcategory.id+');"  />' + '</div>\n' ;
        inner = inner + '<br/>'
        subcategoryElmt.className = "subcategory";
        subcategoryElmt.id = "subcategory-" + subcategory.id;
        subcategoryElmt.innerHTML = inner;
        subcategoryContainer.appendChild(subcategoryElmt);
    }
    if(action == 0){
        var button = document.createElement("div");
        var innersubCategoryAdd = '<input type="button" value="Add" onclick="addSubCategory(\''+name+'\','+id+',0,\''+ownerName+'\')" />';
        button.id = "add-subcategory";
        button.className = "button";
        button.innerHTML = innersubCategoryAdd;
        subcategoryContainer.appendChild(button);
    }

    categoryRightContainer.style.display = "block";
}

function CategoryPanel(){

}

CategoryPanel.data = null;

CategoryPanel.init = function() {
    CategoryPanel.getDataAndRender();
}

CategoryPanel.getDataAndRender = function() {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function(){
        CategoryPanel.data = eval("(" + ajax.xhr.responseText + ")");
        CategoryPanel.render();
    }
    ajax.openAndSend("POST", baseURL + "/CategoryPanel", true, "action=get");
}

CategoryPanel.render = function(){
    var data = CategoryPanel.data;

    addContainer.innerHTML = "";

    var elmt = document.createElement("div");
    var eInner = '<input type="button" value="Add Category" onclick="addCategory();"/>';
    elmt.className = "add-category";
    elmt.innerHTML = eInner;
    addContainer.appendChild(elmt);
    
    categoryContainer.innerHTML = "";

    for(var i = 0; i < data.length; i++){
        var category = data[i];
        var categoryElmt = document.createElement("div");
        var inner = '<div class = "category-name" onclick="showSubCategory(\''+category.name+'\','+category.id+',0,\''+category.ownerName+'\');">'+ category.name + '</div>\n' ;
        inner = inner +  '<img src="delete" alt="delete" onclick="deleteCategory(\''+category.name+'\','+category.id+',1);" />';
        categoryElmt.className = "category";
        categoryElmt.innerHTML = inner;
        categoryContainer.appendChild(categoryElmt);
    }
    userContainer.style.display = "none";
    descContainer.style.display = "none";
    categoryLeftContainer.style.display = "block";
}

CategoryPanel.showPanel = function() {
    if(userContainer!=null && descContainer!=null&& categoryLeftContainer!=null && categoryRightContainer!=null) {
        CategoryPanel.getDataAndRender();
        userContainer.style.display = "none";
        descContainer.style.display = "none";
        categoryLeftContainer.style.display = "block";
    }
}
